<!--  -->
<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="编号" width="70" />
    <el-table-column prop="username" label="账号" />
    <el-table-column prop="nickName" label="姓名" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column label="添加时间">
      <template #default="scope">{{
        formateDate(scope.row.createTime)
      }}</template>
    </el-table-column>
    <el-table-column label="最后登录">
      <template #default="scope">{{
        formateDate(scope.row.loginTime)
      }}</template>
    </el-table-column>
    <el-table-column prop="loginTime" label="最后登录" />

    <el-table-column label="是否启用" width="70">
      <template #default="scope">
        <el-switch
          v-model="scope.row.status"
          :active-value="1"
          :inactive-value="0"
      /></template>
    </el-table-column>
    <el-table-column label="操作" width="190">
      <template #default="{ row }">
        <el-button type="primary" @click="allocRole(row.id)"
          >分配角色</el-button
        >
        <el-button type="info" @click="editAdmin(row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <EditAdmin :visible="visible" @close="closeDialog" :form="rowData" />
  <EditRole
    :visible="roleVisible"
    :form="roleData"
    @close="closeRoleDialog"
  ></EditRole>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref } from "vue";
import {
  getAdminLists,
  getRoleListAll,
  getAdminRoleById,
} from "../../request/api";
import EditAdmin from "./components/EditAdmin.vue";
import EditRole from "./components/EditRole.vue";

interface AdminObjItf {
  username?: string;
}
const state = reactive<{
  tableData: {}[];
  a: number;
  visible: boolean;
  roleVisible: boolean;
  rowData: AdminObjItf;
  roleData: AdminRoleFormData;
}>({
  tableData: [],
  a: 1,
  visible: false,
  roleVisible: false,
  rowData: {},
  roleData: {},
});
const { tableData, a, visible, rowData, roleVisible, roleData } = toRefs(state);

const fetchData = () => {
  getAdminLists({
    keyword: "",
    pageSize: 10,
    pageNum: 1,
  }).then((res) => {
    if (res.code === 200) {
      tableData.value = res.data.list;
    }
  });
};
// 先执行一次
fetchData();

// 获取所有角色
getRoleListAll().then((res) => {
  if (res.code == 200) {
    roleData.value.roleLists = res.data;
  }
});
// 点击分配角色
const allocRole = (id: number) => {
  getAdminRoleById(id).then((res) => {
    if (res.code == 200) {
      roleVisible.value = true;
      rowData.value.userRoles = res.data;
    }
  });
};
// 隐藏分配角色弹框
const closeRoleDialog = () => {
  roleVisible.value = false;
};
// 点击编辑按钮
const editAdmin = (row: AdminObjItf) => {
  visible.value = true;
  rowData.value = row;
};
// 隐藏弹框
const closeDialog = (r?: "reload") => {
  visible.value = false;
  rowData.value = {};
  // 更新表格数据
  r && fetchData();
};

// 格式化时间
const formateDate = (time: string | undefined) => {
  if (!time) return "";
  const date = new Date(time);
  let year = date.getFullYear();
  let month = addZero(date.getMonth() + 1);
  let day = addZero(date.getDate());
  let hour = addZero(date.getHours());
  let min = addZero(date.getMinutes());
  let sec = addZero(date.getSeconds());
  return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
};
const addZero = (num: number) => {
  return num > 9 ? num : "0" + num;
};
</script>

<style lang='less' scoped>
</style>